<template>
  <el-card class="page-order">
    <div slot="header">商品统计</div>
    <!-- 搜索框 -->
    <div class="search-box">
      时间范围
      <el-date-picker
        size="small"
        v-model="date"
        value-format="yyyy-MM-dd HH:mm:ss"
        type="datetimerange"
        range-separator="至"
        start-placeholder="开始日期"
        end-placeholder="结束日期"
      ></el-date-picker>
      <el-button @click="getData" size="small" type="primary">查询</el-button>
    </div>
    <!-- echarts -->
    <!-- <div class="myChart" ref="chartRef"></div> -->

    <!-- 方法一 -->
    <!-- <total-chi
    v-if="Object.keys(chartData).length"
      :chart-data="chartData"
    ></total-chi> -->

    <!-- 方法二 -->
    <total-chi :chart-data="chartData"></total-chi>
  </el-card>
</template>

<script>
// 引入组件
import TotalChi from './TotalChi.vue'

import {getOrderTotalReq} from '@/api/report '
import {formatYMDhms} from '@/filters'

export default {
  components: {
    TotalChi,
  },
  data() {
    return {
      date: [],
      //表格数据
      chartData: {},
    }
  },
  methods: {
    // 获取数据
    async getData() {
      let res = await getOrderTotalReq({
        date: JSON.stringify(this.date),
      })
      console.log(res)

      //解构数据
      let {data} = res.data
      //处理数据
      let xData = data.map(v => formatYMDhms(v.orderTime))
      let series = [
        {
          type: 'bar',
          name: '金额数据',
          data: data.map(v => v.orderAmount),
        },
      ]

      //数据赋值
      this.chartData = {xData, series, title: '金额图表'}
      //画图
      // this.renderLine({
      //   xData,
      //   series,
      //   title: '金额图表',
      // })
    },
  },
  mounted() {
    this.getData()
  },
}
</script>

<style lang="scss" scoped>
.page-order {
  height: 100%;
  background: #f0f2f5;
}

.myChart {
  margin-top: 50px;
  height: 300px;
  background: white;
}
</style>
